import './ProTable.scss'
import PropTypes from 'prop-types'

import { useSize } from 'ahooks'
import { useRequest } from 'alova'
import { useRef, useState } from 'react'
import { ProTable } from '@ant-design/pro-components'

import { Http } from '../Api'
export const ProTableTemplate = ({ title, actionRef, TablePages }) => {
    ProTableTemplate.propTypes = {
        title: PropTypes.string,
        actionRef: PropTypes.object,
        TablePages: PropTypes.object,
    }
    const TableRef = useRef()
    const size = useSize(TableRef)
    const { get, params, path, columns, hideInSearch, options } = TablePages

    const [Index, setIndex] = useState(1)
    const [Size, setSize] = useState(params.pageSize || 10)
    const { send } = useRequest((params, path) => Http({ url: get, params, path }), { immediate: false })
    const getData = async (params) => {
        delete params.current
        params.pageIndex = Index
        params.pageSize = Size
        if (params.IsCheckbox) {
            let data = {}
            params.IsCheckbox.forEach(item => (data = { ...data, [item]: true }))
            delete params.IsCheckbox
            params = { ...params, ...data }
        }
        // 判断排序条件
        if (params.SearchSort) {
            const { SearchSort } = params
            SearchSort.forEach((item, index) => {
                const [field, sort] = item.split('-')
                params[field] = `${sort}@${index}`
            })
            delete params.SearchSort
        }
        return await send(params, path).then(data => {
            if (data.list) return { data: data.list, total: data.total, success: true, page: Index }
            else return { data, success: true, page: Index }
        })
    }

    return (
        <div className="ProTablesA01" ref={TableRef}>
            {size &&
                <ProTable
                    rowKey="uuid"
                    cardBordered
                    params={params}
                    columns={columns}
                    actionRef={actionRef}
                    request={getData}
                    search={hideInSearch ? false : {
                        layout: 'vertical',
                        showHiddenNum: true,
                        optionRender: (searchConfig, formProps, dom) => [...dom.reverse()]
                    }}
                    toolbar={{ title }}
                    pagination={{
                        pageSize: Size,
                        showSizeChanger: true,
                        onChange: (e, a) => {
                            setIndex(e)
                            setSize(a)
                        },
                    }}
                    dateFormatter="string"
                    toolBarRender={() => options && options(123456)}
                    scroll={(() => {
                        let { width: x, height } = size
                        let y = hideInSearch === undefined ? height - 330 : height - 230
                        return { x, y }
                    })()}
                />
            }
        </div>
    )
}